<template>
  <div>
    <!-- 搜索框 -->
    <!-- header 头部 -->
    <!-- 添加回车事件 -->
    <!-- 取消事件，就回退一个 -->
    <van-search ref="searchInput" v-model.trim="keyword" @keydown.enter="searchHandle"  show-action placeholder="请输入商品名称" >
      <template #action>
        <!-- 回退操作 -->
        <div @click="back">取消</div>
      </template>
    </van-search>
    <van-divider class="str1" />
    <!-- 历史记录和热门搜索 -->
    <!--  -->
    <!-- 这里做成组件 -->
    <div v-if="!keyword">
      <!-- 历史记录 应该有一个执行搜索的方法， 向本地存储一份数据-->
      <div class="his" v-if="historySearchList.length>0">
        <!-- 头部 -->
        <div class="title">
          <div class="rec">历史记录</div>
          <van-icon @click="delHistory" class="del" name="delete-o" size="19" />
        </div>
        <!-- 标签信息 -->
        <div class="tag-wrap">
          <van-tag 
            v-for="(item,index) in historySearchList" :key="index"
            v-on:click="tagClickHandle(item)"
            class="but" color="#333" border-color="#999" size="large" plain>{{ item }}</van-tag>
        </div>
      </div>
      
      
      <!-- 灰色分割 -->
      <div class="cut"></div>
      <!-- 热门搜索 -->
      <div class="hot">
        <div class="title">热门搜索</div>
        <div class="tag-wrap">
          <van-tag v-on:click="tagClickHandle(hotSearch.keyword)" v-for="(hotSearch,index) in hotSearchList " :key="index" class="but" :color="index===0? '#dd1a21' : '#333'" :border-color="index===0?'#dd1a21':'#999'" size="large" plain>{{ hotSearch.keyword }}</van-tag>
        </div>
      </div>
      <van-divider class="str2" />
    </div>
    <!-- 点击搜索框展示搜列表 -->
    <div v-else>
      <div>
        <van-cell v-on:click="tagClickHandle(item)" v-for="(item,index) in keywordAotoCompleteList" :key="index" :title="item" is-link />
       </div>
    </div>

    <!-- 再做一个复杂搜索的组件 -->
  </div>
</template>

<script>
import { reqHotSearchKeyWordList, reqSearchAotoComplete ,reqSearchProductList } from '@/axios'
import { debounce } from 'lodash'
import { getHistory, delHistory } from '@/utils/searchHistory'
import { Toast } from 'vant'
export default {
  name: 'searchIndex',
  data() {
    return {
      keyword: this.$route.query.keyword || '',// 对应input搜索记录
      hotSearchList: [], // 热门搜索，
      historySearchList: [], // 历史搜索记录应该存储再本地
      searchKeywordList: [], // 搜索关键字列表
      keywordAotoCompleteList: [], // 关键字自动补全列表
    }
  },
  watch: {
    keyword: debounce(function(){ // 做一个防抖操作
      this.getkeywordAotoCompleteList()
    },200)
    
  },
  methods:{
    // 获取关键词自动补全
    async getkeywordAotoCompleteList(){
      // 如果是空就不执行了
      if(!this.keyword){
        return
      }
      // 每次改变都清空之前的数据
      this.keywordAotoCompleteList = []
      // console.log('防抖',val)
      // 发生改变就发送请求获取搜索关键字
      const res = await reqSearchAotoComplete(this.keyword)
      this.keywordAotoCompleteList = res.data
    },
    // 获取热门搜索数据
    async getHostSearchList(){
      const res = await reqHotSearchKeyWordList()
      this.hotSearchList = res.data.hotKeywordVOList
    },
    // 搜索操作, 触发这个条件应该有两个，一个是点击， 上面的取消按钮应该就是回退一次哪里来的去哪里了
    async searchHandle(){
      if(!this.keyword) return
      // 跳转路由并且进行传递参数
      this.$router.push({
        path: '/manySearch',
        query: { keyword: this.keyword } 
      })
    },
    // 标签点击逻辑，点击的话改变keyword 的值，然后跳转路由，先测试一下回车
    tagClickHandle(keyword){
      this.keyword = keyword
      // 调用处理逻辑
      this.searchHandle()
    },
    // 点击取消按钮对应逻辑
    back(){
      // 回退到上一个路由
      this.$router.back()
      // console.log('点击取消的，回退')
    },
    // 删除历史记录
    delHistory(){
      delHistory()
      Toast.success('删除成功')
      this.historySearchList = []
    }
  },
  mounted(){
    // 一上来就获取焦点
    // this.$refs.searchInput.focus()
    // 获取input 框自动聚焦
    this.$refs.searchInput.querySelector('input').focus()
    // 查看keyword ，如果keyword 不为空，掉用一次查询关键词， 直接调用方法即可
    this.getkeywordAotoCompleteList()

    /**
     * 首先获取热门搜索数据
     */
    this.getHostSearchList()
    
    // 获取搜索历史
    this.historySearchList = getHistory()
  }
}
</script>

<style lang="less">
.str1 {
  margin-top: 0rem
}
// 历史记录信息
.his {
  // 头部
  .title{
    display: flex;
    .rec {
        font-size: 0.4rem;
        color: #999;
        margin-left: 0.4rem;
    }
    // 删除按钮
    .del {
      margin-left: 70%;
      float: left;
    }
  }
  // 历史记录标签
  .tag-wrap{
    margin-top: 10px;
    //tag 标签单条样式
    .but{
      margin-bottom: 8px;
    }
  }
}
.cut{
  width: 100%;
  height: 0.3rem;
  background-color: rgb(245, 245, 245);
  margin-top: 20px;
}
// 热门搜索区域
.hot {
  .title{
    font-size: 0.4rem;
    color: #999;
    margin-left: 0.4rem;
    margin-top: 0.3rem;
  }
  // 
  .tag-wrap{
    margin-top: 10px;
  }
  
}
.but {
  margin-left: 0.4rem;
  margin-bottom: 8px;
}
.str2{
  margin-top: 0.8rem;
}
</style>